/*
 Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
*/

@use '../internal/styles' as styles;
@use '../internal/styles/tokens' as awsui;
@use '../internal/styles/foundation' as foundation;
@use '../internal/generated/custom-css-properties/index.scss' as custom-props;
@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;

$checkbox-size: awsui.$size-control;

// double selector bumps specificity of this rule above the rule in the abstract switch styles applied to the same element
.root.root {
  @include styles.styles-reset;
  display: flex;
}

.checkbox-control {
  @include styles.make-control-size($checkbox-size);
}

.outline {
  #{custom-props.$styleFocusRingBoxShadow}: 0 0 0
    var(#{custom-props.$styleFocusRingBorderWidth}, foundation.$box-shadow-focused-width)
    var(#{custom-props.$styleFocusRingBorderColor}, awsui.$color-border-item-focused);

  @include styles.focus-highlight(
    $gutter: 2px,
    $border-radius: var(#{custom-props.$styleFocusRingBorderRadius}, awsui.$border-radius-control-default-focus-ring),
    $box-shadow: var(#{custom-props.$styleFocusRingBoxShadow})
  );
}
